<template>
  <div >
    <Header></Header>
    <div class="img_main">
      <div class="img_base_info">
        <el-button >默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
      <div class="img_right">
        <el-image
          class ="img_img"
          :src="imgDetail.url"
          fit="fill">
        </el-image>
      </div>
    </div>


    <Footer></Footer>
  </div>
</template>


<script>
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
import {getImgDetail} from '@/api/showImg/img'


export default {
  components: { Footer, Header },
  data() {
    return {
      id: 1,
      imgDetail:{

      },
    }
  },
  created() {
    //当前主键已经挂载到DOM上，（已展示）时被vue自动调用
    this.id = this.$route.params.id
    this.getImgDetail()
  },
  watch: {

  },
  beforeDestroy() {

  },
  mounted( ){

  },
  updated() {

  },
  methods: {
    /** 查询博客详情 */
    getImgDetail() {
      this.loading = true;
      getImgDetail(this.id).then(response => {
        this.imgDetail = response.data;

      });
    },
  }
}
</script>

<style  lang="scss">
.img_main{
  display: flex;

}
.img_base_info{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  button{
    margin: 20px;
    width: 50%;
  }
}
.img_right{
  width: 80%;
  height: 100%;
}

</style>
